<template>
  <div class="main flex-center-center">

    <div class="goBack">
      <lz-header></lz-header>
    </div>

    <div class="box-1">
      <div class="box-left padding-3">
        <div class="nav-logo">
          <img src="@/assets/images/logo.020e864.png" alt="">
        </div>
        <div class="nav-content">
          <p>标书定制</p>
          <p>找模板找标书</p>
          <p>定制标书一站式服务</p>
        </div>
        <div class="image">
          <img src="@/assets/images/login_l_bg.73584b1c.png" alt="">
        </div>
      </div>
      <div class="box-right" v-loading="loading">
        <qr-code @changeBtn="changeItem" v-if="change===0"></qr-code>
        <sign  @changeBtn="changeItem" v-if="change===1"></sign>
        <div class="box-bottom flex-center-center">
          登录即代表同意 <a href="javascript:void (0)">《隐私政策》</a>和<a href="javascript:void (0)">《注册协议》</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qrCode from './components/qrCode.vue'
import sign from './components/sign.vue'
  export default {
    components:{qrCode,sign},
    data(){
      return{
        change:0,
        loading:false
      }
    },
    methods:{
      changeItem(data){
        this.loading=true
        setTimeout(()=>{
          this.change = data
          this.loading=false
        },1000)

      }
    }

  }
</script>

<style scoped lang="scss">
@import "@/assets/css/handle";

.main{
  width: 100%;
  min-height: 100vh;
  @include background('base-bgk');
  .goBack{
    width:100%;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    a{
      font-size: 16px;
      color: #ee9900;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 40px;
        height: 40px;
        object-fit: cover;
      }
    }
  }
  .box-1{
    width: 850px;
    height: 500px;
    background: #fff;
    border-radius: 6px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: flex;
    .box-left{
      width: 350px;
      height: 500px;
      border-bottom-left-radius: 6px;
      border-top-left-radius: 6px;
      background-image: linear-gradient(to top, #e14fad 0%, #f9d423 100%);
      .nav-logo{
        width: 100%;
        height: 100px;
        img{
          height: 80px;
          object-fit: contain;
        }
      }
      .nav-content{
        width: 100%;
        p{
          font-size: 18px;
          margin-top: 15px;
          color: #fff;
        }
      }
      .image{
        width: 100%;
        margin-top: 20px;
        img{
          height:180px;
        }
      }
    }
    .box-right{
      width: 500px;
      height: 500px;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      .box-bottom{
        width: 100%;
        height: 65px;
        background: #f1f2f3;
        border-bottom-right-radius: 6px;
        font-size: 14px;
        color: #999;
        a{
          color:#1966ff;
        }
      }
    }
  }
}
</style>